<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <p id="para"></p>
    <button onclick="myFunc()">点我试试</button>
    <p>这是第一段</p>

    <p>这是第二段</p>

    <p>这是第三段</p>
    <div id="nb">
      <p>这是DIV中的第一个P元素</p>

      <p>这是DIV中的第二个P元素</p>

      <p>这是DIV中的第三个P元素</p>
    </div>
    <p>单击按钮以使用class="demo"（索引0）更改第一个div元素的文本。</p>

    <button onclick="myFunc2()">点击</button>

    <div class="demo">第一个具有class="demo"的div元素。</div>

    <div class="demo">带有class="demo"的第二个div元素。</div>
    <button onclick="sss()">点击</button>
    <div class="note">
      <p>第一个div中的class为" note"的P元素</p>
    </div>

    <div class="demo">
      <p>第一个div中具有class="demo"的P元素</p>
    </div>

    <div class="note">
      <p>第二个div中的class为" note"的P元素</p>
    </div>
    <p>点击按钮以更改所有带有" note"类的div元素的背景颜色:</p>
    <button onclick="myFunc33()">点我试试</button>
    <script>
      //根据id
      document.getElementById("para").innerHTML = "Hello world";
      //根据标签
      function myFunc() {
        var x = document.getElementsByTagName("p");
        x[1].innerHTML = "Hello World!!!";
        for (let i = 0; i < x.length; i++) {
          x[i].style.color = "coral";
        }
      }
      //可以嵌套使用
      var x1 = document.getElementById("nb");
      var y1 = x1.getElementsByTagName("p");
      y1[0].style.backgroundColor = "yellow";

      //根据类名称查找
      function myFunc2() {
        var x2 = document.getElementsByClassName("demo");
        x2[0].innerHTML = "Hello World!!!";
      }

      //通过CSS选择器查找HTML元素
      function sss() {
        var x3 = document.querySelectorAll("div");
        x3[2].innerHTML = "你好";
      }

      function myFunc33() {
        var x33 = document.querySelectorAll("div.note");
        for (let i = 0; i < x33.length; i++) {
          x33[i].style.backgroundColor = "coral";
        }
      }

      //通过HTML对象集合查找HTML元素
      var html = document.documentElement;
      var body = document.body;

      console.log(html);
      console.log(body);
    </script>
  </body>
</html>
